<template>
  <el-row :gutter="24" style="margin-top: 10px">
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header" style="font-size:18px; color:#409eff; font-weight:bold;">
            <span>工单数量</span>
          </div>
        </template>
        <div>
          <el-progress type="circle" :percentage="100" status="success" :width="50" />
          <span class="number">{{ work_order_number }}</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header"  style="font-size:18px; color:#409eff; font-weight:bold;">
            <span>用户数量</span>
          </div>
        </template>
        <div>
          <el-progress type="circle" :percentage="100" status="success" :width="50" />
          <span class="number">{{ user_Number }}</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header" style="font-size:18px; color:#409eff; font-weight:bold;">
            <span>项目数量</span>
          </div>
        </template>
        <div>
          <el-progress type="circle" :percentage="100" status="success" :width="50" />
          <span class="number">{{ project_number }}</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header" style="font-size:18px; color:#409eff; font-weight:bold;">
            <span>服务数量</span>
          </div>
        </template>
        <div>
          <el-progress type="circle" :percentage="100" status="success" :width="50" />
          <span class="number">{{ server_number }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <br />
  <el-card class="box-card">
    <template #header>
      <div class="card-header"  style="font-size:18px; color:#409eff; font-weight:bold;">
        <span>最近30天每日工单数量</span>
      </div>
    </template>
    <div id="myChart" style="width: 100%; height: 500px"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      work_order_number: 0,
      user_Number: 0,
      project_number: 0,
      server_number: 0,
      dashboardlist: '',
      xData: '',
      ySuccessData: '',
    }
  },
  // 页面渲染完后自动加载
  mounted() {
    this.get_work_order_number()
    this.get_user_Number()
    this.get_project_Number()
    this.get_server_Number()
    this.getEchat()
  },
  // 按钮调用
  methods: {
    // 把原来的全部拆分为多个函数请求
    get_work_order_number() {
      this.$http.get('api/work_order/').then(res => {
        this.work_order_number = res.data.count
      })
    },
    get_user_Number() {
      this.$http.get('api/user/').then(res => {
        this.user_Number = res.data.count
      })
    },
    get_project_Number() {
      this.$http.get('api/project/').then(res => {
        this.project_number = res.data.count
      })
    },
    get_server_Number() {
      this.$http.get('api/server/').then(res => {
        this.server_number = res.data.count
      })
    },

    releaseEchat() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      var option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.ySuccessData,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      myChart.setOption(option) // 使用刚指定的配置项和数据显示图表。
    },
    // 请求后端数据赋值
    getEchat() {
      this.$http.get('work_order_echart/').then(res => {
        if (res.data.code == 200) {
          // 重新赋值
          this.xData = res.data.data.x_data;
          this.ySuccessData = res.data.data.y_success_data;
          // 调用图表，进行渲染
          this.releaseEchat()
        }
      })
    }
  }
}
</script>

<style scoped>
.number {
  margin-left: 40%;
  font-size: 40px;
}
</style>
